<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- 
    JSP Name : ma_100_01E.jsp
    Description : 사용자 메인페이지(영문)
    author Seung Won
    since 2012. 8. 20.
    version 1.0
    Modification Information
       since          author              description
    ===========    =============    ===========================
    2012. 8. 20.     Seung Won     최초 생성
--%>
<%@ include file="/WEB-INF/jsp/co/us/include/declare.jspf" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hyundai Motor Company CSR</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, target-densitydpi=medium-dpi" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="/js/com/usr/jquery-1.7.2.min.js"></script>
<script type="text/javascript"> 
    //<![CDATA[
    if (navigator.userAgent.match(/Mobile/i) == null) {
        var rule = "@font-face {";
            rule += "font-family: 'ModernHBold';";
            rule += "src: url('/font/modernh-bold.eot');";
            rule += "src:local(※), url('/font/modernh-bold.woff') format('woff');";
            rule += "font-weight:bold;";
            rule += "font-style:normal;";
            rule += "}";
            rule += "@font-face {";
            rule += "font-family: 'ModernHMedium';";
            rule += "src: url('/font/modernh-medium.eot');";
            rule += "src:local(※), url('/font/modernh-medium.woff') format('woff');";
            rule += "font-weight:normal;";
            rule += "font-style:normal;";
            rule += "}";
 
        var s = document.createElement('style');
        s.type = "text/css";
        document.getElementsByTagName('head')[0].appendChild(s);
 
        if (s.styleSheet) { // IE
            try {
                s.styleSheet.cssText = rule;
            } catch (e) {
                    throw new(Error)("Couldn't reassign styleSheet.cssText.");
            }
        } else {
            (function (node) {
                if (s.childNodes.length > 0) {
                    if (s.firstChild.nodeValue !== node.nodeValue) {
                        s.replaceChild(node, css.firstChild);
                    }
                } else {
                    s.appendChild(node);
                }
            })(document.createTextNode(rule));
        }
    }
    //]]>
</script>
<link rel="stylesheet" type="text/css" href="/css/usr/respond_eng.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/usr/video.css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/css/usr/ie7lte.css" /><![endif]-->
<!--[if gte IE 8]><link rel="stylesheet" type="text/css" href="/css/usr/ie8gte.css" /><![endif]-->
<!--[if gte IE 9]><link rel="stylesheet" type="text/css" href="/css/usr/ie9gte.css" /><![endif]-->
<script type="text/javascript" src="/js/com/usr/respond.min.js"></script>
<script type="text/javascript" src="/js/com/usr/custom.wheel.scrollbar.js"></script>
<script type="text/javascript" src="/js/com/usr/visual.js"></script>
<script type="text/javascript" src="/js/com/usr/projekktor.min.js"></script>
<script type="text/javascript" src="/js/com/usr/ui.js"></script>
<script type="text/javascript"> 
    //<![CDATA[
    var WebArray = [${fil720Path}]; //web img
    var MblArray = [${fil480Path}]; //mobile img
 
    function ChkWidthImg(){//check width for visual Img
        var winW = $(window).width();
        if(winW < 321) var selArray = "MblArray";
        else var selArray = "WebArray";
        $(".mainVisualList li").each(function(i){
            $(this).find("img").attr("src", eval(selArray)[i]);
        });
    }
 
    $(function(){
        ChkScroll();//check element for scroll event
        ChkGalleryLink();//check mobile for gallery link        
    });
 
    $(window).load(function(){
        ChkWidthImg(); //check width for visual Img
    });
 
    if (navigator.userAgent.match(/Mobile/i) !== null){
        window.onorientationchange = HideLayer; //hide layer for ipad orientation
    }
 
    $(window).resize(function(){
        ChkScroll();//check element for scroll event
        ChkWidthImg(); //check width for visual Img
        if (navigator.userAgent.match(/Mobile/i) == null) { //hide layer for web
            if($(".layer, .movieLayer").is(":visible")) { HideLayer()}
        }       
        fe_moviePop();
    });
    //]]>
</script>
<script type="text/javascript" src="/js/com/csr-jcommon-1.0.js"></script>
<form id="popForm" name="popForm" method="post">
    <input type="hidden" id="popuIdx" name="popuIdx" value="" />
</form>
<script type="text/javaScript" language="javascript">
<!--

var preIdx = "";    //이전 이미지 INDEX
var nxtIdx = "";    //다음 이미지 INDEX
var titl = "";      //현재 이미지 제목
var fbImage = "";      //현재 이미지링크

/*
 * 이미지 팝업 이전 이미지
 */
function prePopOpen(){
    if (preIdx == "") return;
    
    imgPop(preIdx);
}

/*
 * 이미지 팝업 다음 이미지
 */
function nxtPopOpen(){
    if (nxtIdx == "") return;
    
    imgPop(nxtIdx);
}

//*
//포토 클릭시
//*
function openPhoto(argIdx){
    
    var photoSrc = $("img[id='photo']").eq(argIdx).attr("src");
    
    $("img[id='ptImg']").attr("src", photoSrc);
    $("img[id='ptImg']").attr("alt", $("img[id='photo']").eq(argIdx).attr("alt"));
  
}

/*
 * 이미지 팝업 Ajax처리
 */
function imgPop(argIdx){
    var url = "/da_500_02.do";
    var param = "phtIdx="+argIdx;
    
    ajaxSubmit(url, param, callbackMapJson);
}

/*
 * 이미지 팝업 Ajax CallBack
 */
function callbackMapJson(jsonData) {
    var html = "";
    var evalData = eval(jsonData);
    document.getElementById("ybPlayer").innerHTML = "";
    if (evalData != null) {
    	if(evalData.videoYn == 'Y'){	
        	document.getElementById("ybPlayer").innerHTML = "<iframe id='youtubePlayer' name='youtubePlayer' type='text/html' width='510px' height='360px' src='http://"+ evalData.videoTag + "' frameborder='0' allowfullscreen>";
        	
        	document.getElementById('photoPlayer2').style.display = 'none';
        	document.getElementById('photoPlayer').style.display = '';
        	
	    }else{
        	$("img[id='lImg']").attr("src", "./upfile/"+evalData.thumnimgpath+"/"+evalData.thumnimgnm);
        	document.getElementById('photoPlayer2').style.display = '';
        	document.getElementById('photoPlayer').style.display = 'none'; 
        }
        $("p[id='lViewTitle']").html("<strong>"+evalData.titl+"</strong>&nbsp;<span>"+evalData.rgstdt+"</span>");
        $("p[id='lVewComment']").html(evalData.sbc);
        
        preIdx = evalData.prephtidx;
        nxtIdx = evalData.nxtphtidx;
        
        titl = evalData.titl;
        fbImage = "/upfile/"+evalData.thumnimgpath+"/"+evalData.thumnimgnm;
    }
}

/*
 * 스크립트 Split
 */
function stringSplit(strData, strIndex){ 
    var stringList = new Array();
    
    while(strData.indexOf(strIndex) != -1) {
        stringList[stringList.length] = strData.substring(0, strData.indexOf(strIndex)); 
        strData = strData.substring(strData.indexOf(strIndex)+(strIndex.length), strData.length); 
    }
    
    stringList[stringList.length] = strData; 
    return stringList; 
   }


/*
 * 페이스북 Share 링크
 */
function goFaceBook(title, link, argGu, argTitl) { 
    var arrLink = stringSplit(link, "/");
    var url = "";
    var images = "";
    var title = title;
    var summary = "";
    
    if (argGu == 'P') {
        url = arrLink[0] + "//" + arrLink[2] + "/da_500_01.do?key=1k2";
        images = arrLink[0] + "//" + arrLink[2] + fbImage;
        summary = titl;
    } else {
        url = arrLink[0] + "//" + arrLink[2] + "/da_200_02.do?blbIdx="+argGu;
        summary = argTitl;
    }
    
    var pWidth = 640;     
    var pHeight = 380; 
    var pLeft = (screen.width - pWidth) / 2;     
    var pTop = (screen.height - pHeight) / 2;       
    fullUrl = "http://www.facebook.com/share.php?s=100&p[url]="+ url                 
    +"&p[images][0]="+ arrLink[0] + "//" + arrLink[2] + fbImage;                  
    +"&p[title]="+ title                 
    +"&p[summary]="+ summary;     
    
    fullUrl = fullUrl.split("#").join("%23");     
    fullUrl = encodeURI(fullUrl);    
    
    window.open(fullUrl, "facebook", "width="+ pWidth +",height="+ pHeight +",left="+ pLeft +",top="+ pTop +",location=no,menubar=no,status=no,scrollbars=no,resizable=no,titlebar=no,toolbar=no"); 
}

/*
 * 트위터 Share 링크
 */
function goTwitter(title, link, argGu, argTitl) {
    var pWidth = 640;     
    var pHeight = 380; 
    var pLeft = (screen.width - pWidth) / 2;     
    var pTop = (screen.height - pHeight) / 2;       
    var arrLink = stringSplit(link, "/");
    var url = "";
    
    if (argGu == 'P') {
        url = arrLink[0] + "//" + arrLink[2] + "/da_500_01.do?key=1k2";
    } else {
        url = arrLink[0] + "//" + arrLink[2] + "/da_200_02.do?blbIdx="+argGu;
    }
    
    var href = "http://twitter.com/intent/tweet?text=" + encodeURIComponent(title) + " " + encodeURIComponent(url);
    var a = window.open(href, 'twitter', "width="+ pWidth +",height="+ pHeight +",left="+ pLeft +",top="+ pTop +",location=no,menubar=no,status=no,scrollbars=no,resizable=no,titlebar=no,toolbar=no");
    if(a) { a.focus(); }
}

/*
 * 쿠키값 얻어오기
 */
function getCookie(name) { 
    var Found = false;
    var start, end;
    var i = 0;
     
    while(i <= document.cookie.length) { 
        start = i;
        end = start + name.length;
     
        if(document.cookie.substring(start, end) == name) { 
            Found = true;
            break;
        } 
        i++; 
    } 
     
    if(Found == true) { 
        start = end + 1;
        end = document.cookie.indexOf(";", start);
    
        if(end < start){
            end = document.cookie.length;
            return document.cookie.substring(start, end);
        }
            
    } 
    return "" 
} 


/*
 * 팝업창 뛰우기
 */
var noticeCookie;

<c:forEach var="result" items="${ppList }" varStatus="status">
    noticeCookie=getCookie("pop${result.popuIdx}");
    if (noticeCookie != "no") {
        win = window.open("","pop${result.popuIdx}",'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,toolbar=no,resizable=no,copyhistory=no,width=${result.wdthVal},height=${result.highVal},left=${result.xPvt},top=${result.yPvt})');
        
        $("#popuIdx").val("${result.popuIdx}");
        $("#popForm").attr('target', 'pop${result.popuIdx}');
        $("#popForm").attr('action','/ma_100_07.do').submit();
    }
</c:forEach>
//-->
</script>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-34153167-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</head>
<body>
<div id="wrap">
    <!-- top -->
    <%@ include file="/WEB-INF/jsp/co/us/include/topE.jsp" %>
    <!-- top -->
    <!-- main -->
    <div id="main">
        <div class="mainVisual">
            <div class="indicator">
            <c:forEach var="result" items="${imgList }" varStatus="status">
                <c:if test="${status.count == 1 }">
                    <a href="#visual${status.count }" class="on" onclick="return false;">${status.count }</a>
                </c:if>
                <c:if test="${status.count != 1 }">
                    <a href="#visual${status.count }" onclick="return false;">${status.count }</a>
                </c:if>
            </c:forEach>
            </div>
            <button class="btnPrev" onclick="visualMove('prev');">PREV</button>
            <div class="mainVisualListWrap">
                <ul class="mainVisualList">
                    <c:forEach var="result" items="${imgList }" varStatus="status">
                        <li><a href="${result.lnkUrl }"><img id="visual${status.count }" onerror="this.src='./img/usr/common/no_img_170_120.gif';" src="/upfile/${result.fil720Path }/${result.fil720Nm }" alt="${status.count }" /></a></li>
                    </c:forEach>
                </ul>
            </div>
            <button class="btnNext" onclick="visualMove('next');">NEXT</button>
        </div>
        <div class="mainNews">
            <h2>CSR News</h2>
            <p class="seeAll"><a href="./da_200_01.do?CSR_LOCALE_PARAM=en"><img src="/img/usr/btn/btn_main_see_all.gif" alt="더보기" /></a></p>
            <div class="scrollAreaY">
                <div class="scrollCont">
                    <ul>
                        <c:forEach var="result" items="${csrList }" varStatus="status">
                        <li>
                            <a href="./da_200_02.do?blbIdx=${result.blbIdx }&currentPageNo=1">
                                <span class="figure"><img onerror="this.src='./img/usr/common/no_img_170_120.gif';" src="/upfile/${result.thumnImgPath }/${result.thumnImgNm}" alt="CSR 소식 이미지" width="270" height="85" /></span>
                                <strong>${result.titl }</strong>
                                <span><c:out value="${result.sbc }"/> </span>
                                <span class="date">&#91;${result.contCd } &#124; ${result.natCd }&#93; <span>&#124; ${result.rgstDt }</span></span>
                            </a> 
                            <p class="sns"><a href="javascript:void(0);" onclick="javascript:goFaceBook('CSR Materials - CSR News', location.href, '${result.blbIdx }', '${result.titl }');"><img src="/img/usr/btn/btn_photo_layer_facebook.gif" alt="facebook" /></a><a href="javascript:void(0);" onclick="javascript:goTwitter('CSR Materials - CSR News', location.href, '${result.blbIdx }', '${result.titl }');"><img src="/img/usr/btn/btn_photo_layer_tweeter.gif" alt="tweeter" /></a></p>
                        </li>
                        </c:forEach>
                    </ul>
                </div>
                <div class="dragger"></div>
            </div>
        </div>
        <div class="mainGallery">
            <h2>Photo Gallery</h2>
            <p class="seeAll"><a href="./da_500_01.do?CSR_LOCALE_PARAM=en"><img src="/img/usr/btn/btn_main_see_all.gif" alt="더보기" /></a></p>
            <div class="mainGalleryList">
                <div class="scrollAreaX">
                    <div class="scrollCont">
                        <ul >
                            <c:forEach var="result" items="${ptList }" varStatus="status">
                                <li><a href="return false;"  class="layOpen"><img id="photo" onClick="imgPop('${result.phtIdx}');" onerror="this.src='./img/usr/common/no_img_170_120.gif';" src="/upfile/${result.thumnImgPath }/${result.thumnImgNm}" alt="${result.titl }" width="225" height="157" /></a></li>
                            </c:forEach>
                         </ul>
                    </div>
                    <div class="dragger"></div>
                </div>
            </div>
        </div>
        <div class="bottomArea">
            <div class="mainMovie">
                <h2>CSR Movie</h2>
                <p class="seeAll"><a href="#"><img src="/img/usr/btn/btn_main_see_all.gif" alt="더보기" /></a></p>
                <p class="movie"><a href="/img/usr/main/En_CSR.mp4" class="movieOpen"><img src="/img/usr/main/main_movie_eng.gif" alt="Movie Area" /></a></p>
            </div>
            <div class="mainNotice">
                <ul class="noticeHeader">
                    <li><a>Notice/Event</a></li>
                </ul>
                <p class="seeAll"><a href="./da_100_01.do?CSR_LOCALE_PARAM=en"><img src="/img/usr/btn/btn_main_see_all.gif" alt="더보기" /></a></p>
                <ul id="mainNtc" class="noticeList">
                    <c:forEach var="result" items="${ntList }" varStatus="status">
                        <c:if test="${result.regnSchCd == '국내' }">
                        <c:set var="regnSchCd" value="domestic"/>
                        </c:if>
                        <c:if test="${result.regnSchCd == '해외' }">
                        <c:set var="regnSchCd" value="overseas"/>
                        </c:if> 
                        <c:if test="${fn:length(result.titl) > 25 }">
                        <li><a href="./da_100_02.do?idx=${result.idx }&blbCd=${result.blbCd}&currentPageNo=1"><span class="flow"><em><c:if test="${result.regnSchCd != null }">[${regnSchCd }]</c:if></em>${fn:substring(result.titl,0,25) }...</span><span class="reverse">&nbsp;${result.rgstDt }</span></a></li>
                        </c:if>
                        <c:if test="${fn:length(result.titl) <= 25 }">
                        <li><a href="./da_100_02.do?idx=${result.idx }&blbCd=${result.blbCd}&currentPageNo=1"><span class="flow"><em><c:if test="${result.regnSchCd != null }">[${regnSchCd }]</c:if></em>${result.titl }</span><span class="reverse">&nbsp;${result.rgstDt }</span></a></li>
                        </c:if>
                    </c:forEach>    
                </ul>
            </div>
            <div class="mainStory">
                <h2><span>Moving the world together</span>Download Reports</h2>
                <ul>
                    <li><a href="/upfile/report/sar/Sustainability_Reports.pdf" target='_blank'><span>Sustainability Reports</span></a></li>
                    <li><a href="/upfile/report/scw/SocialContributionWhitePaper.pdf" target='_blank'><span>Social Contribution White Paper</span></a></li>
                </ul>
            </div>
            <div class="mainSns">
                <h2>Quick menu</h2>
                <ul class="snsLink">
                    <li><a href="/sr_100_01.do?CSR_LOCALE_PARAM=en"><span>CSR Introduction</span></a></li>
                    <li><a href="/ta_100_01.do?CSR_LOCALE_PARAM=en"><span>Sustainability Management</span></a></li>
                    <li><a href="/rt_200_01.do?CSR_LOCALE_PARAM=en"><span>Social Responsibility</span></a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <!-- /main -->
 
    <!-- layer -->
    <div class="layer">
        <div class="mask"></div>
        <div class="layPop">
            <p class="btnClose"><button type="button">close</button></p>
            <div class="photoView">
                <p class="viewPrev"><a href="#" onclick="return false;"><img onclick="prePopOpen();" src="/img/usr/btn/btn_photo_view_left.png" alt="이전" /></a></p>
                <div class="photoCommentArea">
                	<table id="photoPlayer" style="width: 510px;height: 405px " border="0">
                    		<tr>
                    			<td height="26px">
                    			</td>
                    		</tr>
                    		<tr>
                    			<td id="ybPlayer" style="">
                    				
                    			</td>
                    		</tr>
                    		<tr>
                    			<td height="13px">
                    			</td>
                    		</tr>
                    </table>
                    <p  id="photoPlayer2" class="figure"><img id="lImg" onerror="this.src='./img/usr/common/no_img_510_360.gif';" src="" alt="" /></p>
                    <p id="lViewTitle" class="viewTitle"><strong></strong>&nbsp;<span></span></p>
                    <p id="lVewComment" class="viewComment"></p>
                    <p id="lSns" class="sns"><a href="javascript:void(0);" onclick="javascript:goFaceBook('CSR Materials - Photo Gallery', location.href, 'P', '');"><img src="/img/usr/btn/btn_photo_layer_facebook.gif" alt="facebook" /></a><a href="javascript:void(0);" onclick="javascript:goTwitter('CSR Materials - Photo Gallery', location.href, 'P', '');"><img src="/img/usr/btn/btn_photo_layer_tweeter.gif" alt="tweeter" /></a></p>
                </div>
                <p class="viewNext"><a href="#" onclick="return false;"><img onclick="nxtPopOpen();" src="/img/usr/btn/btn_photo_view_right.png" alt="다음" /></a></p>
            </div> 
        </div>
    </div>
    <!-- /layer -->
 
    <!-- movie layer -->
    <div class="movieLayer">
        <div class="mask"></div>
        <div class="movieLayPop">
            <p class="btnClose"><button type="button">close</button></p>
            <div class="movieView">
                <video id="mainPlayer" class="projekktor" poster="/img/usr/eng/common/movie_poster.jpg" title="Hyundai CSR Play" width="720" height="450" controls>
                    <source src="/img/usr/main/En_CSR.mp4" type="video/mp4" />
                </video>
            </div>
        </div>
    </div>
    <!-- /movie layer -->
    <!-- footer -->
    <%@ include file="/WEB-INF/jsp/co/us/include/bottomE.jsp" %>
    <!-- /footer -->
</div>
</body>
</html>

